<template>
  <div class="waiting-page">
    <!-- 头部 -->
    <div class="header">
      <!-- <div>创建等待</div> -->
      <div class="header-btns">
        <div class="header-btns-left">
          <div>
            <img src="../../static/img/set/back.png" alt="" class="back-img" />
          </div>
          <div style="font-size: 26px">返回</div>
        </div>
        <div class="header-btns-right">
          <div class="header-eye">
            <div>
              <img
                src="../../static/img/set/eyefill .png"
                alt=""
                style="width: 20px; height: 20px"
              />
            </div>
            <div>8</div>
          </div>
          <div class="header-justice">
            <div>
              <img
                src="../../static/img/set/justice.png"
                alt=""
                style="width: 20px; height: 20px"
              />
            </div>
            <div>可证明公平性</div>
          </div>
          <div class="icon-copy">
            <div>
              <img
                src="../../static/img/set/icn-copy.png"
                alt=""
                style="width: 20px; height: 20px"
              />
            </div>
            <div>分享对战</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 内容 -->
    <div class="content">
      <div>
        <img
          src="../../static/img/set/Container.png"
          alt=""
          style="width: 46px; height: 43px"
        />
      </div>
      <div class="content-img">
        <img
          v-for="(photo, index) in photoArray"
          :key="index"
          :src="photo"
          alt="照片"
          style="margin-right: 10px; width: 50px; height: 50px"
        />
      </div>
      <div style="display: flex; justify-content: center; align-items: center">
        <div>
          <img
            src="../../static/img/set/waitTime.png"
            alt=""
            style="width: 15px; margin-right: 10px"
          />
        </div>
        <div style="font-size: 12px; color: rgba(29, 226, 88, 1)">等待中</div>
      </div>
      <div style="display: flex; justify-content: center; align-items: center">
        <div>
          <img
            src="../../static/img/set/coinx.png"
            alt=""
            style="width: 15px; margin-right: 10px"
          />
        </div>
        <div style="font-size: 12px">46.86</div>
      </div>
    </div>

    <div class="container">
      <!-- 上层：对战卡片 -->
      <div class="match-cards" :class="{'centered-layout': playerCount === 2,'centered-layout-3': playerCount === 3,'centered-layout-4': playerCount === 4}">
        <div
          v-for="i in renderCount"
          :key="i"
          class="match-card"
        >
          <div>
            <img
              :src="joined? ready : wait"
              alt="状态图标"
              class="status-icon"
            />
          </div>
          <span v-if="i !== renderCount.length - 1" class="vs">VS</span>
        </div>
      </div>

      <!-- 下层：每张卡片下方对应一个按钮/用户信息 -->
      <div class="action-row" :class="{'action-layout': playerCount === 2,'action-layout-3': playerCount === 3,'action-layout-4': playerCount === 4}" >
        <div
          v-for="i in renderCount"
         :key="i"
          class="action-cell"
        >
          <div v-if="joined" class="user-info">
            <div class="user-icons">
              <div>
                <img
                  src="../../static/img/set/user.png"
                  alt=""
                  class="user-photo"
                />
              </div>
              <div>
                <img
                  src="../../static/img/set/LVL.png"
                  alt=""
                  class="user-lvl"
                />
              </div>
            </div>
            <div class="user-name">
              <div
                style="
                  display: flex;
                  justify-content: start;
                  align-items: center;
                  width: 150px;
                  margin-bottom: 10px;
                "
              >
                <div style="margin-right: 5px">用户名</div>
                <div style="color: #ff661a">25.80%</div>
              </div>
              <div
                style="
                  display: flex;
                  justify-content: start;
                  align-items: center;
                "
              >
                <div>
                  <img
                    src="../../static/img/set/coinx.png"
                    alt=""
                    class="user-coin"
                  />
                </div>
                <div>46.86</div>
              </div>
            </div>
          </div>
          <button v-else @click="handleJoin(index)" class="join-button">
            加入对战
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent,computed } from "vue";
import { ref } from "vue";
import ready from "@/static/img/set/ready.png";
import wait from "@/static/img/set/wait.png";

export default defineComponent({
  setup() {
     // 控制当前显示人数（2、3、4）
    const playerCount = ref(4); // 可以改为 3 或 4
    // 表示每个位置是否已加入
    const joined = ref([false, false, false, false]);

    const handleJoin = (index: number) => {
      // 切换当前项的状态
      joined.value[index] = !joined.value[index];
    };
    // 定义照片数组
    const photoArray = ref([wait, wait]);
     // 新增：根据 playerCount 动态生成 [0, 1] / [0, 1, 2] / [0, 1, 2, 3]
    const renderCount = computed(() => {
      return Array.from({ length: playerCount.value }, (_, i) => i);
    });
 
    return {
      joined,
      handleJoin,
      ready,
      wait,
      photoArray,
      playerCount,
      renderCount
     
    };
  },
});
</script>

<style scoped lang="scss">
.waiting-page {
  .header {
    margin-bottom: 10px;
    width: 1284px;
    .header-btns {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .header-btns-left {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 86px;
        height: 37px;
        .back-img {
          width: 13px;
          height: 13px;
          margin-right: 5px;
        }
      }
      .header-btns-right {
        display: flex;
        justify-content: center;
        align-items: center;
        .header-eye {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 10px;
        }
        .header-justice {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 10px;
        }
        .icon-copy {
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
  .content {
    width: 1284px;
    height: 106px;
    border-radius: 14px;
    background: rgba(28, 28, 35, 1);
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    .content-img {
      width: 920px;
      height: 74px;
      border-radius: 8px;
      background: rgba(24, 24, 29, 1);
      display: flex;
      justify-content: start;
      align-items: center;
    }
  }
  .container {
    width: 1284px;
    height: 432px;
    border-radius: 14px;
    background: rgba(28, 28, 35, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    .match-cards {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      margin-bottom: 30px;
      border-radius: 10px;
      width: 1252px;
      height: 320px;
      padding: 30px;

      background: linear-gradient(
        180deg,
        rgba(18, 18, 23, 0.9) 0%,
        rgba(18, 18, 23, 0.4) 48.75%,
        rgba(18, 18, 23, 0.9) 100%
      );
      &.centered-layout {
    justify-content: center;

    .match-card {
      margin-right: 100px !important; // 调整卡片之间的间距
        margin-left: 100px !important; // 调整卡片之间的间距
      .vs{
        margin-left: 150px !important;
      }
      &:last-child {
        margin-right: 0;
      }
    }
  }
  &.centered-layout-3{
    justify-content: center;

    .match-card {
      margin-right: 50px !important; // 调整卡片之间的间距
        margin-left: 50px !important; // 调整卡片之间的间距
      .vs{
        margin-left: 130px !important;
      }
      &:last-child {
        margin-right: 0;
      }
    }
  }
  &.centered-layout-4{
    justify-content: center;

    .match-card {
      margin-right: 20px !important; // 调整卡片之间的间距
        margin-left: 20px !important; // 调整卡片之间的间距
      .vs{
        margin-left: 65px !important;
        margin-right: 33px !important;
      }
      &:last-child {
        margin-right: 0;
      }
    }
  }

      .match-card {
        display: flex;
        align-items: center;
        margin-right: 20px;

        &:last-child {
          margin-right: 0;
        }

        .status-icon {
          width: 150px; // 根据整体布局推荐的合适大小
          height: 150px;
          // object-fit: contain; // 保持图片比例，防止变形
          margin-right: 10px; // 让 VS 和文本有一定距离
        }

        .vs {
          margin: 0 10px;
          color: #fff;
          opacity: 0.5;
        }
      }
    }

    .action-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      max-width: 1284px;
      &.action-layout{
        justify-content: center;
        .action-cell {
           margin-left: 207px;
          margin-right: 231px;
        }
      }
      &.action-layout-3{
         justify-content: center;
        .action-cell {
          margin-left: 157px;
          margin-right: 164px;
        }
      }
      &.action-layout-4{
         justify-content: center;
        .action-cell {
          margin-left: 111px;
          margin-right: 116px;
        }
      }
      .action-cell {
        width: calc(25% - 15px); /* 四列布局 */
        text-align: center;
      }
    }

    .join-button {
      padding: 10px 15px;
      background-color: #ff6a00;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s;

      &:hover {
        background-color: #ff8c3b;
      }
    }

    .user-info {
      display: flex;
      align-items: center;
      .user-icons {
        position: relative;
        .user-photo {
          width: 56px;
          height: 56px;

          border-radius: 180px;
        }
        .user-lvl {
          position: absolute;
          top: 46px;
          left: 15px;
          width: 25px;
          height: 11px;
          opacity: 1;
          border-radius: 2px;
        }
      }
      .user-name {
        margin-left: 20px;
        .user-coin {
          width: 20px;
          height: 20px;
        }
      }
    }
    
  }
}
</style>
